.loading-progress {
  .progress-mask {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #e55e04;

    .content {
      position: absolute;
      width: 100%;
      top: 35%;
      margin-top: -250px;
      height: 500px;
      transform: scale(.5);
      font-family: 'DINAlternate';

      .loadingio-spinner-ball {
        width: 100%;
        height: 400px;
        display: inline-block;
        overflow: hidden;

        .ldio {
          width: 100%;
          height: 100%;
          position: relative;
          transform: translateZ(0) scale(1);
          backface-visibility: hidden;
          transform-origin: 0 0; /* see note above */
          will-change: transform;

          > div {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #53e1b7;
            left: 50%;
            margin-left: -50px;
            top: 20px;
            animation: ldio 1s linear infinite;
            box-sizing: content-box;
          }
        }
      }

      .ball-shadow {
        width: 100px;
        height: 20px;
        border-radius: 100%;
        margin: 20px auto;
        background-color: #ffd751;
      }

      .progress-txt {
        text-align: center;
        padding: 20px;
        color: #ffffff;
        font-size: 24px;
        font-weight: 900;
        font-family: 'DINAlternate';
      }
    }
  }

  @keyframes ldio {
    0%,
    100% {
      animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
    }
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, 308px);
      animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}
